<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="21">
          <el-form-item label="产品名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入产品名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="medium" v-on:click="upperCase">
            首字母大写
          </el-button>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="分类" prop="categories">
                <el-select
                  v-model="formData.categories"
                  placeholder="请选择分类"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in categoriesOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select
                  v-model="formData.tags"
                  placeholder="请选择标签"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in tagsOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="进价" prop="orgPrice">
                <el-input
                  v-model="formData.orgPrice"
                  placeholder="请输入进价"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="SKU" prop="sku">
                <el-input
                  v-model="formData.sku"
                  placeholder="请输入SKU"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="常规价格" prop="regular_price">
                <el-input
                  v-model="formData.regular_price"
                  placeholder="请输入常规价格"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="促销价格" prop="sale_price">
                <el-input
                  v-model="formData.sale_price"
                  placeholder="请输入促销价格"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="库存" prop="stock_quantity">
                <el-input
                  v-model="formData.stock_quantity"
                  placeholder="请输入库存"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="重量" prop="weight">
                <el-input
                  v-model="formData.weight"
                  placeholder="请输入重量"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="24">
          <el-divider content-position="center">主图，首图放第一张</el-divider>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item prop="images">
                <ImageUpload
                  ref="images"
                  :isShowTip="false"
                  :value="formData.images"
                  @input="uploadImagesPicResult"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-col>

        <el-col :span="24">
          <el-divider content-position="center">变体图</el-divider>
          <el-row :gutter="15">
            <el-col :span="5">
              <el-form-item label="价格" prop="varprice1">
                <el-input
                  v-model="formData.varprice1"
                  placeholder="请输入价格"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3" :offset="4">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item prop="varimage1">
                <ImageUpload
                  ref="varimage1"
                  :isShowTip="false"
                  :value="formData.varimage1"
                  @input="uploadVarimage1PicResult"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="24">
          <el-divider content-position="center"
            >变体2，如果只有一种价格，就不要传</el-divider
          >
          <el-row :gutter="15">
            <el-col :span="5">
              <el-form-item label="价格" prop="varprice2">
                <el-input
                  v-model="formData.varprice2"
                  placeholder="请输入价格"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3" :offset="4">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item prop="varimage2">
                <ImageUpload
                  ref="varimage2"
                  :isShowTip="false"
                  :value="formData.varimage2"
                  @input="uploadVarimage2PicResult"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="9">
          <el-form-item label="简单描述" prop="short_description">
            <el-input
              v-model="formData.short_description"
              type="textarea"
              placeholder="请输入简单描述"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="详细描述" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              placeholder="请输入详细描述"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { listCategories, listTags, addProduct } from "@/api/woocom/product";
import ImageUpload from "@/components/ImageUpload/index";
export default {
  components: {
    ImageUpload,
  },
  props: [],
  data() {
    return {
      formData: {
        name: "",
        categories: undefined,
        tags: undefined,
        orgPrice: undefined,
        sku: undefined,
        regular_price: undefined,
        sale_price: undefined,
        stock_quantity: 10000,
        weight: 0.25,
        varprice1: undefined,
        varprice2: undefined,
        images: null,
        varimage1: null,
        varimage2: null,
        short_description: "❤  The products sold in our store are all from N factory, JF factory and other large factories, the quality is guaranteed, please rest assured to buy. \n❤  If you need other watches, you can contact us via whatsapp at any time.",
        description: undefined,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入产品名称",
            trigger: "blur",
          },
        ],
        categories: [
          {
            required: true,
            message: "请选择分类",
            trigger: "change",
          },
        ],
        tags: [
          {
            required: true,
            message: "请选择标签",
            trigger: "change",
          },
        ],
        orgPrice: [
          {
            required: true,
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        sku: [],
        regular_price: [
          {
            required: true,
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入常规价格",
            trigger: "blur",
          },
        ],
        sale_price: [],
        stock_quantity: [
          {
            required: true,
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入库存",
            trigger: "blur",
          },
        ],
        weight: [
          {
            required: true,
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入重量",
            trigger: "blur",
          },
        ],
      },
      categoriesOptions: [],
      tagsOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getCategories();
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        //todo 处理数组
        // 提交表单
        addProduct(this.formData).then((response) => {
          this.$modal.msgSuccess("新增成功,等待大概1分钟查看结果！");
           this.resetForm();
          return;
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },

    //上传接口
    uploadImagesPicResult(e) {
      this.formData.images = e;
    },
    uploadVarimage1PicResult(e) {
      this.formData.varimage1 = e;
    },
    uploadVarimage2PicResult(e) {
      this.formData.varimage2 = e;
    },

    //获取分类和标签数据
    getCategories() {
      listCategories().then((response) => {
        this.categoriesOptions = response.data;
      });
      listTags().then((response) => {
        this.tagsOptions = response.data;
      });
    },
    //首字母大写
    upperCase() {
      let text = this.formData.name;
      if (text) {
        // 将输入的字符串按空格分割成单词数组
        let words = text.split(" ");
        words = words.map((word) => {
          // 对每个单词的首字母进行大写转换
          return word.charAt(0).toUpperCase() + word.slice(1);
        });
        // 将转换后的单词数组拼接成字符串
        text = words.join(" ");
      }
      this.formData.name = text;
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
